<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px" v-if="searchItem">
      <el-form-item label="分类名称" prop="goodsTypeId">
        <el-select v-model="queryParams.goodsTypeId" placeholder="请选择分类名称" clearable @clear="getDataList">
          <el-option v-for="item in inGoodsTypeList" :key="item.id" :label="item.title" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="衣服分类" prop="clothingCategoryId">
        <el-select v-model="queryParams.clothingCategoryId" placeholder="请选择衣服分类" clearable @clear="getDataList">
          <el-option v-for="item in inClothingCategoryList" :key="item.id" :label="item.title" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="衣服档位" prop="level">
        <el-input v-model="queryParams.level" placeholder="请输入衣服档位" clearable />
      </el-form-item> -->
      <el-form-item label="商品名称" prop="title">
        <el-input v-model="queryParams.title" placeholder="请输入商品名称" clearable @clear="getDataList" />
      </el-form-item>
      <!-- <el-form-item label="种类" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择种类" clearable>
          <el-option label="单商品" value="1"></el-option>
          <el-option label="套餐" value="0"></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="价格" prop="minPrice">
        <el-input v-model="queryParams.minPrice" placeholder="请输入价格" clearable @clear="getDataList" />
      </el-form-item>
      <el-form-item label="-" prop="maxPrice" class="input_multiple">
        <el-input v-model="queryParams.maxPrice" placeholder="请输入价格" clearable @clear="getDataList" />
      </el-form-item>
      <el-form-item label="开关" prop="switchFlag">
        <el-select v-model="queryParams.switchFlag" placeholder="请选择开关" clearable @clear="getDataList">
          <el-option label="是" :value="1"></el-option>
          <el-option label="否" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="置顶" prop="topSwitch">
        <el-select v-model="queryParams.topSwitch" placeholder="请选择是否置顶" clearable @clear="getDataList">
          <el-option label="是" :value="1"></el-option>
          <el-option label="否" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="创建时间" prop="role">
        <el-date-picker v-model="queryParams.status" type="datetime" placeholder="请选择创建时间" align="right" :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item> -->

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getDataList">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5" v-if="addBtn">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="addOrUpdateHandle('add')" v-hasPermi="['goods:goods:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5" v-if="editBtn">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="addOrUpdateHandle" v-hasPermi="['goods:goods:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5" v-if="delectBtn">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="deleteHandle" v-hasPermi="['goods:goods:remove']">删除</el-button>
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="exportHandle" v-hasPermi="['goods:goods:export']">导出</el-button>
      </el-col> -->
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getDataList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :border="listBorder" :data="dataList" @selection-change="dataListSelectionChangeHandle">
      <el-table-column type="selection" width="55" align="center" v-if="type == 'indexList'" />
      <el-table-column label="ID" width="55" align="center" prop="id" />
      <el-table-column label="分类名称" width="100" align="center">
        <template slot-scope="scope">
          {{scope.row.goodsType ? scope.row.goodsType.title : ''}}
        </template>
      </el-table-column>
      <el-table-column label="衣服分类" width="100" align="center">
        <template slot-scope="scope">
          {{scope.row.clothingCategory ? scope.row.clothingCategory.title : ''}}
        </template>
      </el-table-column>
      <el-table-column label="衣服档位" width="100" align="center" prop="level" />
      <el-table-column label="商品名称" align="center" prop="title" />
      <el-table-column label="首图" width="150" align="center" prop="image">
        <template slot-scope="scope">
          <ImagePreview width="100px" height="100px" noneType="暂无图片" :src="scope.row.image" fit="cover"></ImagePreview>
        </template>
      </el-table-column>
      <el-table-column label="轮播图" width="150" align="center" prop="images">
        <template slot-scope="scope">
          <ImagePreview width="100px" height="100px" noneType="暂无图片" :src="scope.row.images" fit="cover"></ImagePreview>
        </template>
      </el-table-column>
      <el-table-column label="种类" width="100" align="center" prop="packageStatus">
        <template slot-scope="scope">
          <span>{{ scope.row.packageStatus == 0 ? '单商品' : '套餐'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="价格" width="80" align="center" prop="price" />
      <el-table-column label="排序" width="80" align="center" prop="weigh" />
      <el-table-column label="开关" width="80" align="center" prop="switchFlag">
        <template slot-scope="scope">
          <el-switch :active-value="1" :inactive-value="0" v-model="scope.row.switchFlag" @change="changeSwitch(scope.row)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="置顶" width="80" align="center" prop="topSwitch">
        <template slot-scope="scope">
          <el-switch :active-value="1" :inactive-value="0" v-model="scope.row.topSwitch" @change="changeSwitch(scope.row)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="150" align="center" prop="createtime" />
      <el-table-column fixed="right" label="操作" width="150" align="center" class-name="small-padding fixed-width" v-if="type == 'indexList'">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="addOrUpdateHandle(scope.row)" v-hasPermi="['goods:goods:edit']">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteHandle(scope.row.id)" v-hasPermi="['goods:goods:remove']">删除</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" header-align="center" align="center" width="150" v-if="chooseTable">
        <template slot-scope="scope">
          <el-button size="small" @click="toggleSelectHandle(scope.row)" :style="actionStyle(scope.row)">
            {{actionText(scope.row)}}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :current-page.sync="pageNum" :page.sync="pageNum" :limit.sync="pageSize" @pagination="query" />
    <!-- <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total"
      layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
      @current-change="pageCurrentChangeHandle">
    </el-pagination> -->
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './goodList/index-add-or-update.vue'  //新增修改的状态弹窗
import { goodsList, goodsSave } from "@/api/goods/goodList/goodlList";
import { clothingCategoryList } from "@/api/goods/clothingCategory/clothingCategory";
import { goodsTypeList } from "@/api/goods/goodsType/goodsType";

export default {
  name: "GoodList",
  dicts: ['jiekee_goods_cabinet_norms'],
  mixins: [mixinViewModule],
  //  type                              使用列表的状态 indexList为后面有操作权限
  //  searchItem                        是否显示查询板块
  //  listBorder                        table是否展示边框
  //  chooseTable                       table是否可以选中
  //  editBtn                           是否显示修改按钮
  //  addBtn                            是否显示新增按钮
  //  delectBtn                         是否显示删除按钮
  props: {
    type: {
      type: String,
      default: ''
    },
    searchItem: {
      type: Boolean,
      default: false
    },
    listBorder: {
      type: Boolean,
      default: false
    },
    chooseTable: {
      type: Boolean,
      default: false
    },
    editBtn: {
      type: Boolean,
      default: false
    },
    addBtn: {
      type: Boolean,
      default: false
    },
    delectBtn: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      mixinViewModuleOptions: {
        getDataListURL: '/goods/list',
        getDataListIsPage: true,
        deleteURL: '/goods/remove',
        deleteIsBatch: true
      },
      // 查询参数
      queryParams: {
        goodsTypeId: '',
        clothingCategoryId: '',
        title: '',
        minPrice: '',
        maxPrice: '',
        switchFlag: '',
        topSwitch: '',
      },
      pageNum: 1,                    // 当前页码
      pageSize: 10,                  // 每页数
      total: 0,                   // 总条数
      inClothingCategoryList: [],
      inGoodsTypeList: [],
      value: [], //如果table可以选中，选中的值
    }
  },
  components: {
    AddOrUpdate, //新增修改的状态弹窗
  },
  created() {
    clothingCategoryList().then((res) => {
      this.inClothingCategoryList = res.data
    })
    goodsTypeList().then((res) => {
      this.inGoodsTypeList = res.data
    })
  },
  methods: {
    // 点击开关 值改变
    changeSwitch(row) {
      let params = {
        id: row.id,
        switchFlag: row.switchFlag,
        topSwitch: row.topSwitch,
      }
      goodsSave(params).then(response => {
        this.$modal.msgSuccess("操作成功");
      }).catch(() => {
        this.confirmLoading = false
      });
    },
    actionStyle(row) {
      let color = "#666";
      if (this.value) {

        if (this.value instanceof Array) {
          this.value.forEach(item => {
            if (item.id == row.id) {
              color = "#409EFF";
            }
          });
        }
        else {
          if (this.value.id == row.id) {
            color = "#409EFF";
          }
        }
      }
      return {
        color
      }
    },
    actionText(row) {
      let text = "未选择";

      if (this.value) {
        if (this.value instanceof Array) {
          this.value.forEach(item => {
            if (item.id == row.id) {
              text = "已选择";
            }
          });
        }
        else {
          if (this.value.id == row.id) {
            text = "已选择";
          }
        }
      }
      return text
    },
    toggleSelectHandle(row) {
      if (this.value instanceof Array) {
        const index = this.value.findIndex((r) => r.id === row.id);
        if (index > -1) {
          this.value.splice(index, 1);
        } else {
          this.value.push({ ...row });
        }
      } else {
        if (row.id === this.value?.id) {
          this.value = {};
        } else {
          this.value = { ...row };
        }
      }
    },
  }
};
</script>
<style lang="scss" scoped>
.input_multiple {
  ::v-deep .el-form-item__label {
    width: auto !important;
  }
}
</style>
